<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="~{common::css}"></div>
    <title>博客详情</title>
</head>
<body class="m-blog-details" >
<!--导航-->
<div  th:replace="~{common::topbar(n=0)}" ></div>
<!--中间内容-->
<div id="waypoint" class="m-padded-tb-big m-container-small animated fadeIn"  >
    <div class=" ui container" >

        <!--头部-->
        <div  class="ui  top attached segment" id="top" >
            <div class="ui  horizontal link list mini">
                <!--博客信息-->
                <div class="item">
                    <!--头像-->
                    <img src="../static/images/varter.jpg" th:src="@{${blog.getAvatar()}}" alt="" class="ui avatar image">
                    <!--名字-->
                    <div class="content"><a href="#" class="header" ><span th:text="${blog.getAuthor()}"></span></a></div>
                </div>
                <!--更新时间-->
                <div class="item">
                    <a href="#"> <i class="calendar alternate outline icon"></i><span th:text="${#dates.format(blog.getCreateTime(),'yyyy-MM-dd')}"></span></a>
                </div>
                <!--浏览次数-->
                <div class="item">
                    <a href="#" ><i class="eye  icon" ></i>&nbsp;&nbsp;<span th:text="${blog.getViews()}"></span> </a>
                </div>
            </div>
        </div>
        <!--图片区域-->
        <div class="ui attached segment">
            <img src="../static/images/blog1.jpg" th:src="@{${blog.getFirstPicture()}}" alt="" class="ui  rounded fluid image">
        </div>
        <!--内容-->
        <div class="ui  attached padded segment">

            <div class="ui right aligned basic segment">
            <div class="ui  orange  label" th:text="${blog.getFlag()}">原创</div>
            </div>
            <h2 class="ui  center aligned header" th:text="${blog.getTitle()}">关于可以学习的清单</h2>
            <br>
            <div id="content " class="typo typo-selection  js-toc-content  m-padded-lr m-padded-tb" th:utext="${blog.getContent()}"></div>


            <!--标签-->
            <div class="m-padded-lr">
                <div class="ui basic teal left pointing label" th:text="${blog.getTagIds()}">方法论</div>
            </div>
            <!--点赞-->
            <div class="ui  center aligned  basic segment" th:if="${blog.getAppreciation()==true}">
            <button id="likeButton" class="ui orange basic circular button">点赞</button>
            </div>
            <div class="ui  likeB flowing popup  transition hidden">
                <div class="ui orange basic label">
                    <div class="ui images" style="font-size: inherit !important;">
                        <div class="image">
                            <img th:src="@{/images/Iplay.png}" alt="" class="ui  rounded bordered image" style="width: 120px">
                            <div>支付宝</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--  博客信息-->
        <div class="ui attached positive message">
          <div class="ui middle aligned grid">
              <div class="eleven wide column">
                <ui class="list">
                    <li>作者：<span th:text="${blog.getAuthor()}"></span></li>
                    <li>发表时间：<span th:text="${#dates.format(blog.getCreateTime(),'yyyy-MM-dd')}"></span></li>
                    <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                    <li>公众号转载：请在文末添加作者公众号二维码</li>
                </ui>
              </div>
            <div class="five  wide column">
            </div>
              <img th:src="@{/images/wechat.png}" alt="" class="ui basic right floated rounded bordered  image m-padded-mini" style="width: 150px;">
          </div>
        </div>
        <!--  留言区域-->
    <div  class="ui bottom attached segment"  >
         <div id="comment-container"  class="ui teal segment" th:if="${blog.getCommentabled()}">
              <div th:fragment="commentList">
                  <div class="ui threaded comments" style="max-width: 100%">
                  <h3 class="ui dividing header" >评论 <span style="font-size: 10px" th:if="${#strings.isEmpty(session.user)}">
                      (需要评论请先<a th:href="@{/toLoginOut}">登录</a>)</span> </h3>

                  <div  class="comment"    th:each="comment:${comments}" >
                      <a class="avatar">
                          <img src="../static/images/varter.jpg" th:src="${comment.getAvatar()}">
                      </a>
                      <div class="content">
                          <a class="author" >
                              <span th:text="${comment.getNickname()}"></span>
                              <div class="ui mini  orange left pointing label m-padded-mini m-text-thin" th:if="${comment.adminComment}">管理员</div>
                              <div class="ui mini  orange left pointing label m-padded-mini m-text-thin" th:if="${comment.getAuthor()}">博主</div>
                          </a>
                          <div class="metadata">
                              <span class="date" th:text="${#dates.format(comment.getCreateTime(),'yyyy-MM-dd')}"></span>
                          </div>
                          <div class="text" th:text="${comment.getContent()}">
                              How artistic!
                          </div>
                          <div class="actions">
                              <a class=" reply"
                                 th:attr="data-commentid=${comment.id},data-commentnickname=${comment.getNickname()}"
                                 data-commentid="1" data-commentnickname="Matt"
                                 onclick="reply(this)" style="color: #00B5AD">回复</a>

                              <a   th:if="${(session.user!=null&&session.user.role=='admin') || (session.user!=null&&session.user.id==authorId) }"
                                   style="color: #00B5AD;font-size: 13px"
                                   th:href="@{/deleteComment/{id}(id=${comment.getBlogId()},commentId=${comment.getId()})}" >删除</a>


                          </div>

                      </div>
                     <div class="comments" th:if="${#arrays.length(comment.getReplyComments())>0}">
                          <div class="comment" th:each="reply:${comment.getReplyComments()}">
                              <a class="avatar">
                                  <img src="../static/images/varter.jpg" th:src="${reply.getAvatar()}">
                              </a>
                              <div class="content">
                                  <a class="author" >
                                      <span th:text="${reply.getNickname()}"></span>
                                      <div class="ui mini  orange left pointing label m-padded-mini m-text-thin"  th:if="${reply.adminComment}">管理员</div>
                                      <div class="ui mini  orange left pointing label m-padded-mini m-text-thin" th:if="${reply.getAuthor()}">博主</div>
                                      &nbsp; <span th:text="|@${reply.getParentComment().getNickname()}|" style="color: #00B5AD">@</span>
                                      </a>
                                  <div class="metadata">
                                      <span class="date" th:text="${#dates.format(reply.getCreateTime(),'yyyy-MM-dd')}"></span>
                                  </div>
                                  <div class="text" th:text="${reply.getContent()}">
                                      How artistic!
                                  </div>
                                  <div class="actions">
                                      <a class="reply"   data-commentid="1" data-commentnickname="Matt"
                                         th:attr="data-commentid=${reply.id},data-commentnickname=${reply.getNickname()}"
                                         onclick="reply(this)"  style="color: #00B5AD">回复</a>
                                      <a   th:if="${(session.user!=null&&session.user.role=='admin') || (session.user!=null&&session.user.id==authorId) }" style="color: #00B5AD;font-size: 13px"
                                           th:href="@{/deleteComment/{id}(id=${comment.getBlogId()},commentId=${reply.getId()})}" >删除</a>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>

              </div>
          </div>
     </div>
            <div  id="comment-form" class="ui form"  th:if="${blog.getCommentabled()}">
                <div th:if="${session.user!=null}">
                <input type="hidden" name="blog.id" th:value="${blog.getId()}">
                <input type="hidden" name="parentComment.id" value="-1">
                <div class="field">
                    <textarea name="content" id="" cols="30" rows="10" placeholder="请输入评论。。。"></textarea>
                </div>
                <div class="fields">
                     <div class="field m-mobile-wide m-margin-bottom-small ">
                         <div class="ui left icon input">
                             <i class="user icon"></i>
                             <input type="text" placeholder="姓名" name="nickname" th:value="${session.user!=null}?${session.user.getNickname()}">
                         </div>
                     </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class=" ui left icon input">
                            <i class="mail icon"></i>
                            <input type="hidden" th:value="${session.user.getNickname()}" id="infoName">
                            <input type="hidden" th:value="${session.user.getEmail()}" id="infoEmail">
                        <input type="text" placeholder="邮箱" name="email" th:value="${session.user!=null}?${session.user.getEmail()}">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button  id="comment-btn" type="button" class="ui teal button m-mobile-wide "><i class="edit icon"></i>发布评论</button>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
<!--工具栏-->
<div id="toolbar" class=" m-padded m-fixed m-right-bottom    " style="display: none">
    <div class="ui vertical icon buttons ">
       <a href="#top" class="ui  icon teal button"><i class="paper plane icon"></i></a>
        <button type="button" class="ui toc teal button">目录</button>
        <a href="#comment-container" class="ui  teal button">留言</a>
        <button  class="ui  wechat icon teal button"><i class="wechat icon"></i></button>
</div>
<!--目录生成-->
    <div class="ui  toc-container flowing popup  transition hidden " style="width: 250px; !important;">
        <ol class="js-toc">
        </ol>
    </div>
    <div id="qrcode" class="ui  wechat-qy flowing popup  transition hidden  " style="width: 130px !important;">
       <!-- <img src="Static/images/wechat.png" alt="" class="ui rounded image" style="width: 120px">-->
    </div>
</div>
<!--底部 footer-->
<div th:replace="~{common::footer}"></div>

<script src="../static/js/jquery-3.5.1.js" th:src="@{/js/jquery-3.5.1.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
    <script  th:inline="javascript">
        $('.menu.toggle').click(function (){
            $('.m-item').toggleClass('m-mobile-hide');

        });
        /*目录初始化*/
        tocbot.init({
            // Where to render the table of contents.
            tocSelector: '.js-toc',
            // Where to grab the headings to build the table of contents.
            contentSelector: '.js-toc-content',
            // Which headings to grab inside of the contentSelector element.
            headingSelector: 'h1, h2, h3',
        });
        /*点赞*/
        $('#likeButton').popup({
            popup : $('.likeB.popup'),
            on : 'click',
            position : 'bottom center'
        });
        /*目录*/
        $('.toc.button').popup({
            popup : $('.toc-container.popup'),
            on : 'click',
            position : 'left center'
        });
        /*微信阅读*/
        $('.wechat').popup({
            popup : $('.wechat-qy'),
            position : 'left center'
        });
        /*二维码初始化*/
        let serurl = "127.0.0.1:8080";
        let url = /*[[@{/toBlog/{id}(id=${blog.id})}]]*/"";
        let qrcode = new QRCode("qrcode",{
            text : serurl + url,
            width : 100,
            height : 100,
            colorDark : "#000000",
            correctLevel : QRCode.CorrectLevel.H
        });
        /*滚动检测*/
        let waypoint =  new  Waypoint({
            element : document.getElementById('waypoint'),
            handler : function(direction){
                if (direction=='down'){
                    $('#toolbar').show(1200);
                }else {
                    $('#toolbar').hide(500);
                }
                console.log('Scrolled to way point! '+direction)
            }
        });
        $('.ui.dropdown').dropdown({
            on : 'hover',
        });

        $(function () {
            $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"@{/comments/{id}(id=${blog.id})}");
        });

        //评论表单验证
        $('.ui.form').form({
            fields: {
                title: {
                    identifier: 'content',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入评论内容'
                    }
                    ]
                },
                content: {
                    identifier: 'nickname',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入你的大名'
                    }]
                },
                type: {
                    identifier: 'email',
                    rules: [{
                        type: 'email',
                        prompt: '请填写正确的邮箱地址'
                    }]
                }
            }
        });

        //控制台校验 成功后 执行发布操作
        $('#comment-btn').click(function () {
          let boo =  $('.ui.form').form('validate form');
            if (boo){
                console.log('校验成功');
                postData();
            }else {
                console.log('校验失败');
            }
        });
        function postData() {
            $("#comment-container").load(/*[[@{/comments}]]*/"",{
                "parentCommentId": $("[name='parentComment.id']").val(),
                "blogId": $("[name='blog.id']").val(),
                "nickname": $("[name='nickname']").val(),
                "email": $("[name='email']").val(),
                "content": $("[name='content']").val()
            }, function (responseTxt, statusTxt, xhr) {

                clearContent();
            });
        }
        // 评论提交以后 清除评论栏的内容 完成初始化
        function clearContent() {
            let info = $("#info").val();
            $("[name='content']").val('');
            $("[name='parentComment.id']").val(-1);
            $("[name='content']").attr("placeholder", "请输入评论信息");
            $("[name='nickname']").val($("#infoName").val());
            $("[name='email']").val($("#infoEmail").val());

        }


        function reply(obj) {
            //因为data方法不能取到有大写字母的参数的值 所以没有用驼峰命名
            let commentId = $(obj).data('commentid');
            let commentNickname = $(obj).data('commentnickname');
            $("[name='content']").attr("placeholder", "@" + commentNickname).focus();
            $("[name='parentComment.id']").val(commentId);
        }
    </script>
</body>

</html>